<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>网站后台管理模版</title>
	<link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css" />
</head>

<body>
<div class="page-content-wrap">
	<form class="layui-form" action="">
		<div class="layui-form-item">
			<div class="layui-inline tool-btn">
				<button class="layui-btn layui-btn-small layui-btn-normal addBtn hidden-xs" data-url="menu-add.html"><i class="layui-icon">&#xe654;</i></button>
				<button class="layui-btn layui-btn-small layui-btn-warm listOrderBtn hidden-xs" data-url="menu-add.html"><i class="iconfont">&#xe656;</i></button>
			</div>
			<div class="layui-inline">
				<input type="text" name="title" required lay-verify="required" placeholder="角色名称" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-inline">
				<select name="states" lay-filter="status">
					<option value="">请选择一个状态</option>
					<option value="010">显示</option>
					<option value="021">隐藏</option>
				</select>
			</div>
			<button class="layui-btn layui-btn-normal" lay-submit="search">搜索</button>
		</div>
	</form>
	<div class="layui-form" id="table-list">
		<table class="layui-table" lay-skin="line">
			<colgroup>
				<col width="50">
				<col class="hidden-xs" width="50">
				<col class="hidden-xs" width="80">
				<col class="hidden-xs" width="80">
				<col class="hidden-xs" width="80">
				<col width="80">
				<col width="130">
			</colgroup>
			<thead>
			<tr>
				<th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
				<th class="hidden-xs">序号</th>
				<th class="hidden-xs">角色名称</th>
				<th class="hidden-xs">角色权限</th>
				<th class="hidden-xs">状态</th>
				<th >相关操作</th>
			</tr>
			</thead>
			<tbody>
			<tr id='node-1' class="parent collapsed">
				<td><input type="checkbox" name="" lay-skin="primary" data-id="1"></td>
				<td class="hidden-xs">1</td>
				<td class="hidden-xs">万猪猪</td>
				<td class="hidden-xs">管理员<a class="layui-btn layui-btn-mini layui-btn-normal showSubBtn" data-id='1'>+</a></td>
				<td class="hidden-xs">正常</td>
				<td>
					<div class="layui-inline">
						<button class="layui-btn layui-btn-mini layui-btn-normal  add-btn" data-id="1" data-url="menu-add.html"><i class="layui-icon">&#xe654;</i></button>
						<button class="layui-btn layui-btn-mini layui-btn-normal  edit-btn" data-id="1" data-url="menu-add.html"><i class="layui-icon">&#xe642;</i></button>
						<button class="layui-btn layui-btn-mini layui-btn-danger del-btn" data-id="1" data-url="menu-add.html"><i class="layui-icon">&#xe640;</i></button>
					</div>
				</td>
			</tr>
			<tr id='node-5' class="child-node-1 parent collapsed" style="display: none;" parentid="1">
				<td><input type="checkbox" name="" lay-skin="primary" data-id="5"></td>
				<td class="hidden-xs">1.1</td>
				<td class="hidden-xs">Admin</td>
				<td>&nbsp;&nbsp;&nbsp;&nbsp;——修改</td>
				<td><button class="layui-btn layui-btn-mini layui-btn-warm table-list-status">隐藏</button></td>
				<td>
					<div class="layui-inline">
						<button class="layui-btn layui-btn-mini layui-btn-normal  edit-btn" data-id="5" data-url="menu-add.html"><i class="layui-icon">&#xe642;</i></button>
						<button class="layui-btn layui-btn-mini layui-btn-danger del-btn" data-id="5" data-url="menu-add.html"><i class="layui-icon">&#xe640;</i></button>
					</div>
				</td>
			</tr>
			</tbody>
		</table>
	</div>
</div>
<script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="../../static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
<script>
	layui.use(['jquery'], function() {
		var $=layui.jquery;
		//修改状态
		$('#table-list').on('click', '.table-list-status', function() {
			var That = $(this);
			var status = That.attr('data-status');
			var id = That.parent().attr('data-id');
			if(status == 1) {
				That.removeClass('layui-btn-normal').addClass('layui-btn-warm').html('隐藏').attr('data-status', 2);
			} else if(status == 2) {
				That.removeClass('layui-btn-warm').addClass('layui-btn-normal').html('显示').attr('data-status', 1);

			}
		})
		//栏目展示隐藏
		$('.showSubBtn').on('click', function() {
			var _this = $(this);
			var id = _this.attr('data-id');
			var parent = _this.parents('.parent');
			var child = $('.child-node-' + id);
			var childAll = $('tr[parentid=' + id + ']');
			if(parent.hasClass('collapsed')) {
				_this.html('-');
				parent.addClass('expanded').removeClass('collapsed');
				child.css('display', '');
			} else {
				_this.html('+');
				parent.addClass('collapsed').removeClass('expanded');
				child.css('display', 'none');
				childAll.addClass('collapsed').removeClass('expanded').css('display', 'none');
				childAll.find('.showSubBtn').html('+');
			}

		})
	});
</script>
</body>

</html>